<template>
    <div>
        <el-card class="!border-none mt-4 supgrade" shadow="never">
            <el-descriptions title="" :column="1" :size="size" :style="blockMargin">
                <el-descriptions-item label="名称">{{
                    baseInfo.name
                }}</el-descriptions-item>
                <el-descriptions-item label="图标">
                    <img :src="baseInfo.app_icon" alt="" style="width:40px;height:40px;border-radius: 8px;">
                </el-descriptions-item>
                <el-descriptions-item label="版本">{{
                    baseInfo.version_no
                }}</el-descriptions-item>
                <el-descriptions-item label="安装时间">{{
                    baseInfo.create_time
                }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import { getAppDetail } from "@/api/cloudupdate";

const props = defineProps({
    app: {
        type: String,
        default: "",
    },
});
const baseInfo = reactive({
    name: "",
    app_icon: "",
    version_no: "",
    create_time: "",
});
const size = ref("");

const blockMargin = computed(() => {
    const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
    };
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    };
});
onMounted(async () => {
    await getAppDetail({ app: props.app })
        .then((res) => {
            Object.keys(baseInfo).forEach((key) => {
                //@ts-ignore
                baseInfo[key] = res[key];
            });
        })
        .catch((ret) => { });
});
</script>

<style lang="scss" scoped></style>
